<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        main{
            height: 400px;
            width: 400px;
            margin: 0 auto;

        }
        .line{
            width: 40px;
            height:9px;
            border-radius: 50%;
            background-color: #bbbbbb;
            position: relative;
            top: 200px;
            transition: line .3s;
            animation: line .6s;
            animation-iteration-count:infinite;
            animation-direction: alternate-reverse;

        }



        .ball{
            width: 50px;
            height: 50px;
            animation-duration: .5s;
            background-color: #4a78c2;
            border-radius: 50%;
            transition: all .3s;
            animation: ball .6s;
            animation-iteration-count:infinite;
            animation-direction: alternate-reverse;

        }
        @keyframes ball {
            from{
                width: 50px;
                height: 50px;
                background-color: #4a78c2;
                border-radius: 50%;

            }
         to{
             transform: translateY(200px);
             width: 45px;
             height: 45px;
             background-color: indianred;

         }

        }
        @keyframes line {
            from{
                transform: scale(0);
            }
            to{
                
            }

        }

    </style>
</head>
<body>
<main >
<div class="ball"></div>
    <div class="line"></div>
</main>
</body>
</html>